<template>
	<view class="lession">
		<view class="nolist" v-if="lessionlist.length==0">数据加载中...</view>
		<block v-for="(item,index) in lessionlist" :key="index">
			<!--大图-->
			<view class="view-big imgbox" @click="todetail(item.id)" v-if="item.style ==1">
				<image class="bigpic forimg"  :src="item.picture"></image>
				<lessionItem :status="item.status" />
			</view>
			<!--小图-->
			<view class="view-half imgbox" @click="todetail(item.id)" v-else>
				<image class="halfpic forimg"  :src="item.picture"></image>
				<lessionItem :status="item.status" />
			</view>
		</block>
		
	</view>
</template>

<script>
	import lessionItem from '@/components/lession-item/lession-item.vue';
	import {common} from '@/common/publish.js'
	export default {
		components:{
			lessionItem
		},
		data() {
			return {
				lessionlist:[]
			};
		},
		onLoad() {
			this.request();
		},
		methods:{
			todetail:function(val){
				uni.navigateTo({
					url: '/pages/xq/xq?type=lession&id='+val
				});
			},
			request:function(){
				uni.request({
					url: common.localurl+'/api/topic/list.json', //仅为示例，并非真实接口地址。
					method:'GET',
					success: (res) => {
						if(res.data.length>0){
							this.lessionlist = res.data
						}
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	@import "../../common/publish";
	page{
		background-color: $bgcolor;
	}
	.lession{
		padding:0 24upx 50upx 24upx;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap ;
		justify-content:space-between;
		align-items:flex-start;
	}
	.view-big .img{
		width:140upx;
		height:140upx;
	}
	.imgbox{
		border:1px solid #e2e2e2;
		border-radius:8upx;
		margin-top:24upx;
		background:#fff;
		position:relative;
	}
	.view-big{
		width:680upx;
		height:300upx;
		padding:10upx;
	}
	.view-half{
		width:318upx;
		height:192upx;
		padding:10upx;
	}
	.forimg{
		width:100%;
		height:100%;
	}
	.nolist{
		text-align:center;
		margin:0 auto;
		color:$timecolor;
		font-size:30upx;
		margin-top:80upx;
	}
</style>
